<template>
	<div id="applo">
		<div id="admin">
			<div class="poslo" v-loading="loading">
				<div class="adminlo">{{$store.state.AppName}}</div>
				<div class="example-block">
					<span class="example-demonstration" style="margin-left: -110px;">请选择类型：&nbsp;&nbsp;&nbsp;</span>
					<el-cascader v-model="value" :options="options" style="width: 250px;" placeholder="选择" />
				</div>
				<br />
				<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="工 号：" prop="sid">
						<el-input prefix-icon="el-icon-user" style="width: 250px" type="text" v-model="ruleForm.sid" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密 码：" prop="password">
						<el-input prefix-icon="el-icon-menu" style="width: 250px" show-password type="password" v-model="ruleForm.password"
						 autocomplete="off"></el-input>
					</el-form-item>



					<el-form-item class="btn">
						<el-button type="primary" style="width: 100px;margin-left: 150px;" @click="toregister">新员工注册</el-button>
					</el-form-item>
					<el-form-item class="btn">
						<el-button type="primary" style="width: 100px;" @click="submitForm">登录</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import qs from 'qs'
	import { ElMessage } from 'element-plus'
	export default {
		name: "app",
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入工号"));
				} else {
					if (this.ruleForm.password !== "") {
						this.$refs.ruleForm.validateField("password");
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入密码"));
				} else if (value.length < 8 || value.length > 13) {
					callback(new Error("长度必须在8-12之内!"));
				} else {
					callback();
				}
			};
			return {
				loading: false,
				ruleForm: {
					sid: "",
					password: "",
				},
				rules: {
					sid: [{
						validator: validatePass,
						trigger: "blur"
					}],
					password: [{
						validator: validatePass2,
						trigger: "blur"
					}],
				},
				options: [{
						value: 'staff',
						label: '员工'
					},
					{
						value: 'manager',
						label: '经理'
					}
				]
			};
		},
		methods: {
			submitForm() {
				let that=this
				let str=qs.stringify(that.ruleForm)
				that.$axios.get("http://localhost:8080/staff/login?"+str).then(function(res){
					if(res.data!=null&&res.data!=''){
						sessionStorage.setItem("staff",JSON.stringify(res.data))
						that.$router.push("/home")
					}else{
						 ElMessage.error('登录失败，请重新登录')
					}
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			toregister() {
				this.$router.push('/register');
			}
		},
	};
</script>

<style>
	* {
		padding: 0;
		margin: 0;
	}

	#applo {
		font-family: "Avenir", Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #2c3e50;
		width: 100%;
		height: 100%;
		background: url("../../assets/img/login_bg.jpg");
		background-size: 100% 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	#admin {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -200px;
		margin-left: -250px;
		width: 500px;
		height: 400px;
		background: #fff;
		border-radius: 10%;
		box-shadow: 8px 10px 10px rgb(177, 223, 242);
	}

	.btn {
		position: absolute;
	}

	.adminlo {
		margin: 40px 0;
		/* margin-right: 10px; */
		text-shadow: 10px 13px 3px rgb(207, 207, 207);
		text-align: center;
	}

	.poslo {
		width: 450px;
		height: 350px;
		position: absolute;
		top: 25px;
		left: 25px;
	}
</style>
